<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 容器|模板 -->
    <div id="app">
            请输入搜索的关键字： <input type="text" v-model="keyword">
            <ul>
                <li v-for="(item,index) in arr" :key="index">{{item.q}}</li>
            </ul>
    </div>
</body>
</html>
<script>
    //https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&wd=nba&req=2&csor=1&cb=cb&_=1648605785333


     //关联VM
     const VM = new Vue({
         el:'#app',
         data:{
             keyword:'',
             arr:[]
         },
         watch:{
             keyword(){
                //  准备一个同名函数  相当于函数的声明部分
                window.cb = function(data){
                    // 储存一下百度服务器返回的数据
                    console.log(data)
                    VM.arr = data.g

                }
                // 创建script标签  将百度服务器的cb函数调用部分引用
                let script = document.createElement('script')
                script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&wd=${this.keyword}&req=2&csor=1&cb=cb&_=1648605785333`
                document.body.appendChild(script)
                document.body.removeChild(script) 
             }
         }
     })
</script>